<template>
  <view class="user-container">
    <view class="user-avatar">
      <img :src="BASE_URL + userInfo.avatar" alt="" />
    </view>
    <view class="user-info">
      <view class="user-title">
        <view class="user-name">{{ userInfo.userName }}</view>
        <!-- <view class="user-code">test</view> -->
      </view>
      <!-- <view class="user-motto">生活不会亏待任何一个努力的人！</view> -->
    </view>
  </view>

  <view class="line"></view>

  <uni-list :border="false">
    <uni-list-item
      title="待办事项"
      link
      clickable
      @click="toPage"
    ></uni-list-item>
    <uni-list-item
      title="退出登陆"
      showArrow
      clickable
      @click="handleLogout"
    ></uni-list-item>
    <uni-list-item
      title="IMEI"
      showArrow
      clickable
      :rightText="imei"
      @click="inputImei"
    ></uni-list-item>
    <!--  <uni-list-item
      title="test"
      showArrow
      clickable
      @click="handleOpen"
    ></uni-list-item> -->
  </uni-list>
  <!-- <UserSelect ref="userSelect"></UserSelect> -->
  <UniFoot type="usermy"></UniFoot>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useAuthStore } from "@/store/modules/auth.js";
import { getUserProfile } from "@/api/user.js";
import { router, LOGIN_PATH, ABOUT_PATH } from "@/router/index.js";
import { BASE_URL } from "@/utils/requset.js";
import UniFoot from "@/components/uni-foot.vue";
const imei = ref(uni.getStorageSync("imei"));
const inputImei = () => {
  uni.showModal({
    title: "IMEI码",
    editable: true,
    content: imei.value,
    success: function (res) {
      if (res.confirm) {
        uni.setStorageSync("imei", res.content);
        imei.value = res.content;
      }
    },
  });
};
const authStore = useAuthStore();
const userInfo = ref({});
function handleLogout() {
  authStore.logout().then((res) => {
    router.reLaunch({ path: LOGIN_PATH });
  });
}
const toPage = () => {
  router.toPage({ path: "/pages/task/index" });
};
onMounted(() => {
  getUserProfile().then((res) => {
    userInfo.value = res.data;
  });
});
const userSelect = ref();

const handleOpen = () => {
  userSelect.value.open();
};
</script>

<style lang="scss" scoped>
.user {
  &-container {
    display: flex;
    align-items: center;
    padding: $uni-spacing-row-base $uni-spacing-col-base;
    background-color: $uni-bg-color;
  }

  &-avatar {
    width: $uni-img-size-lg;
    height: $uni-img-size-lg;
    border-radius: 50%;
    background-color: #eee;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }

  &-info {
    margin-left: $uni-spacing-row-lg;
  }

  &-title {
    display: flex;
    align-items: flex-end;
  }

  &-name {
    font-size: $uni-font-size-lg;
  }

  &-code {
    margin-left: $uni-spacing-row-base;
    font-size: $uni-font-size-sm;
  }

  &-motto {
    font-size: $uni-font-size-sm;
  }
}

.line {
  height: 16px;
  background-color: $uni-bg-color-grey;
}
</style>
